<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>生成二维码</title>
    <link rel="stylesheet" href="__LIBS__/layui/css/layui.css">
</head>
<body>
<div class="layui-container">
    <fieldset class="layui-elem-field">
        <legend>生成二维码</legend>
        <div class="layui-field-box">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <form action="{:addon_url('qrcode://index/build')}" class="layui-form layui-form-pane" method="get">
                        <div class="layui-form-item">
                            <label class="layui-form-label">* 文本内容</label>
                            <div class="layui-input-block">
                                <input type="text" name="text" value="{:request()->domain()}" autocomplete="off" placeholder="请输入文本内容" lay-verify="required" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label">生成图片</label>
                            <div class="layui-input-block">
                                <input type="radio" name="save" value="1" title="是">
                                <input type="radio" name="save" value="0" title="否" checked="checked">
                            </div>
                        </div>
                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label">容错级别</label>
                            <div class="layui-input-block">
                                <input type="radio" name="level" value="0" title="低" checked="checked">
                                <input type="radio" name="level" value="1" title="中">
                                <input type="radio" name="level" value="2" title="高">
                                <input type="radio" name="level" value="3" title="超高">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">大小</label>
                            <div class="layui-input-block">
                                <input type="text" name="size" value="3" autocomplete="off" placeholder="请输入大小" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">内边距</label>
                            <div class="layui-input-block">
                                <input type="text" name="margin" value="4" autocomplete="off" placeholder="请输内边距" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <img src="http://iph.href.lu/99x99?bg=e6e6e6&text=此处生成二维码" id="qrcodeimg" style="border: 1px solid #e6e6e6">
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">二维码链接</label>
                            <div class="layui-input-block">
                                <input type="text" autocomplete="off" class="layui-input" id="qrcodeurl">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-filter="*" lay-submit="">生成二维码</button>
                                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </fieldset>
</div>
<script src="__LIBS__/layui/layui.js"></script>
<script>
layui.use(['form', 'jquery'], function(){
    var form  = layui.form,
        $     = layui.jquery;
    form.on('submit(*)', function (data) {
        if ($('input[name=save]:checked').val() == 1) {
            $.ajax({
                url: data.form.action,
                type: data.form.method,
                dataType: 'json',
                data: $(data.form).serialize(),
                success: function (res) {
                    $('#qrcodeurl').val(res);
                    $('#qrcodeimg').attr('src', res);
                }
            });
        } else {
            $('#qrcodeurl').val(data.form.action+'?'+$(data.form).serialize());
            $('#qrcodeimg').attr('src', data.form.action+'?'+$(data.form).serialize());
        }
        return false;
    });
});
</script>
</body>
</html>